<template>
  <div class="inquire">
    <!-- 查询图片s -->
    <template v-if="!isShow">
      <div class="inquire_cha_box">
        <img
          class="inquire_cha_gif"
          src="http://wap.cjm.so/Operator/Common/images/newAint/in-verification.gif"
          alt
        />
      </div>
      <div class="inquire_cha_footer dis_y_center w_all">
        <div>超级码</div>
        <div>产品的超级身份证</div>
      </div>
    </template>
    <!-- 查询图片e -->
    <template v-if="isShow">
      <!-- 顶部次数s -->
      <div class="inquire_result_header">
        <div class="inquire_result_header_font">木伯乐</div>
      </div>
      <!-- 顶部次数e -->

      <!-- 身份信息部分s -->
      <div class="bg_fff mt_47 inquire_result_center1">
        <div class="dis inquire_result_center1_box">
          <img
            class="inquire_result_center1_img"
            src="http://wap.cjm.so/Operator/Common/images/newAint/title_logo.png"
            alt
          />
          <div class="inquire_result_center1_font">产品身份证信息</div>
        </div>
        <div class="inquire_result_center1_box2 dis_y_xy_center">
          <div class="inquire_result_center1_box2_font1 fz_color_aaa">产品唯一身份编码</div>
          <div class="inquire_result_center1_box2_font2 fz_color_3232">{{code}}</div>
          <div class="inquire_result_center1_box2_font1 fz_color_aaa">第一次查询时间</div>
          <div class="inquire_result_center1_box2_font2 fz_color_3232">{{time}}</div>
          <div
            class="inquire_result_center1_box2_font3 fz_color_3232"
          >您正在查询木伯乐的防伪产品，当前产品为正品商品，本次查询时间{{time}}，谨防假冒！如有疑问请联系厂家。</div>
        </div>
      </div>
      <!-- 身份信息部分e -->
      <!-- 产品信息部分s -->
      <div class="inquire_result_center1 bg_fff">
        <div class="dis inquire_result_center1_box">
          <img
            class="inquire_result_center1_img"
            src="http://wap.cjm.so/Operator/Common/images/newAint/title_logo1.jpg"
            alt
          />
          <div class="inquire_result_center1_font">产品身份标识对比</div>
        </div>
        <div class="inquire_result_center2_box2 dis_y_xy_center w_all">
          <img
            src="../../assets/images/木伯乐.png"
            alt
            class="w_all"
          />
          <div
            class="fz_color_ccc fz_14 inquire_result_center2_box2_font"
          >查询小贴士：产品所贴防伪标识应与查询结果标识图案基本一致，数字编码以产品标识为准</div>
        </div>
        <div class="inquire_result_center2_box2_line w_all"></div>
      </div>
      <!-- 产品信息部分e -->

      <!-- 产品信息部分s -->
      <div class="inquire_result_center1 bg_fff">
        <div class="dis inquire_result_center1_box">
          <img
            class="inquire_result_center1_img"
            src="http://wap.cjm.so/Operator/Common/images/newAint/title_logo.png"
            alt
          />
          <div class="inquire_result_center1_font">产品身份证信息</div>
        </div>
        <div class="inquire_result_center1_box2">
          <div class="dis f_14">
            <div class="fz_color_aaa">企业名称</div>
            <div class="fz_color_3232 ml_30">木伯乐集团有限公司</div>
          </div>
          <div class="dis f_14 mt_10">
            <div class="fz_color_aaa">品牌名称</div>
            <div class="fz_color_3232 ml_30">木伯乐</div>
          </div>
          <div class="dis f_14 mt_10">
            <div class="fz_color_aaa">产品名称</div>
            <div class="fz_color_3232 ml_30">木伯乐生态板</div>
          </div>
        </div>
      </div>
      <!-- 产品信息部分s -->

      <!-- 弹窗s -->
      <van-popup v-model="isCenter" style="border-radius: 5px;">
        <div class="inquire_popup">
          <div class="dis_y_xy_center w_all" style="background: #f6a229;">
            <!-- <div class="inquire_popup_1 mt_10">24</div> -->
            <div class="fz_14 fz_color_fff mt_10 mb_10">木伯乐</div>
          </div>
          <div class="fz_color_aaa fz_14 mt_10 mb_10">产品唯一身份编码</div>
          <div class="fz_color_3232 fz_14 pb_10">{{code}}</div>
          <div class="br"></div>
          <div class="fz_color_aaa fz_14 mt_10 mb_10">本次查询时间</div>
          <div class="fz_color_3232 fz_14 pb_10">{{time}}</div>
          <div class="br"></div>
          <div class="fz_color_3232 fz_14 p_all_10">您所查询的防伪码为木伯乐生态板产品，本次查询时间是{{time}}，谨防假冒，每次防伪码都将加密重新生成！如有疑问请联系厂家。</div>
          <img
            src="http://wap.cjm.so/Operator/Common/images/newAint/bottom.png"
            alt
            style="height: 95px;width:100%"
          />
        </div>
      </van-popup>
      <!-- 弹窗e -->
    </template>
  </div>
</template>

<script>
import { Popup } from "vant";
export default {
  components: {
    [Popup.name]: Popup
  },

  data() {
    return {
      isShow: false,
      isCenter: false,
      code: "",
      time: ""
    };
  },
  created() {
    let _this = this;
    setTimeout(function() {
      _this.isShow = true;
      _this.isCenter = true;
      _this.code = _this.$route.query.code || "************";
      _this.time = _this.$route.query.currDate || "************";
      _this.doTTS(_this.$route.query.currDate);
    }, 3000);
  },
  computed: {},

  methods: {
    doTTS(time) {
      new Audio(`http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=您所查询的防伪码为木伯乐生态板产品，本次查询时间是{${time}}，谨防假冒，每次防伪码都将加密重新生成！如有疑问请联系厂家。`).play();
    }
  }
};
</script>

<style lang="less">
@import "../../base.css";
.inquire {
  background: #fff;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  &_popup {
    width: 290px;

    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    &_1 {
      height: 58px;
      width: 58px;
      border-radius: 50%;
      border: 4px solid #fff;
      color: #ffffff;
      font-size: 40px;
      text-align: center;
      line-height: 58px;
    }
  }
  &_result_center2_box2 {
    padding: 15px;
    &_font {
      line-height: 22px;
      margin-top: 10px;
    }
    &_line {
      height: 30px;
      border-top: 2px solid #eeeeee;
    }
  }
  &_result_center1 {
    border-top: 10px solid #eeeeee;
    &_box {
      padding: 15px;
      border-bottom: 1px solid #e6e6e6;
    }
    &_box2 {
      padding: 25px 15px;
      &_font1 {
        font-size: 16px;
        padding-top: 10px;
      }
      &_font2 {
        font-size: 16px;
        padding: 10px 0 5px 0;
        border-bottom: 1px solid #eee;
      }
      &_font3 {
        line-height: 26px;
        margin-top: 20px;
      }
    }
    &_img {
      width: 17px;
      height: 17px;
    }
    &_font {
      margin-left: 10px;
    }
  }
  &_result_header {
    background: #f6a229;
    padding: 15px 0;
    position: fixed;
    top: 0;
    width: 100%;
    &_font {
      color: #ffffff;
      font-size: 16px;
      margin: 0 auto 16px;
      margin-bottom: 0;
      text-align: left;
      width: 90%;
    }
  }
  &_cha_box {
    display: flex;
    justify-content: center;
    margin-top: 20%;
  }
  &_cha_gif {
    width: 296px;
  }
  &_cha_footer {
    box-sizing: border-box;
    color: #b7b7b7;
    font-size: 14px;
    position: fixed;
    bottom: 20px;
  }
}
</style>
